<template>
  <el-dialog
    :title="title"
    v-model:visible="showDialog"
    width="500px"
    :close-on-click-modal="false"
    :show-close="showClose"
    @close="$emit('close')"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ cancelBtnText }}</el-button>
      <el-button type="primary" @click="confirm">{{ confirmBtnText }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  },
  props: {
    title: {
      type: String,
      default: '提示'
    },
    cancelBtnText: {
      type: String,
      default: '取 消'
    },
    confirmBtnText: {
      type: String,
      default: '确 定'
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    cancel() {
      this.showDialog = false;
      this.$emit('cancel');
    },
    confirm() {
      this.showDialog = false;
      this.$emit('confirm');
    }
  }
};
</script>

<style lang="less" scoped>
// @import '~@/common/less/pcCommon.less';
/deep/.el-dialog__header {
  padding: 15px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
}
/deep/.el-dialog__body {
  padding: 24px 24px 24px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  line-height: 22px;
}
/deep/.el-dialog__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  padding: 10px 16px;
  .dialog-footer {
    .el-button {
      width: auto;
      padding: 9px 20px;
    }
  }
}
</style>
